<template>
  <div class="navbar">
    <div class="navbar-wrapper">
      <div class="header-container">
        <div class="logo-container">
          <el-image src="/src/assets/login.jpg"></el-image>
          <el-text> 范敬龙 2021035107032</el-text>
        </div>
        <div class="content">
          <el-menu router default-active="/" class="el-menu-demo" mode="horizontal" :ellipsis="false">
            <div class="flex-grow" />
            <el-menu-item index="/">首页</el-menu-item>
            <el-menu-item index="/vue5">第五节</el-menu-item>
            <el-menu-item index="/hotSpot">热点</el-menu-item>
            <el-switch v-model="theme" inline-prompt @click="toggle()" :active-icon="Moon" :inactive-icon="Sunny"></el-switch>
            <el-sub-menu>
              <template #title>
                <span style="margin: 0 10px 0 0">{{ username }}</span>
                <img style="width: 40px; height: 40px; border-radius: 50%" :src="imgUrl" alt="" />
              </template>
              <el-menu-item index="/admin" >后台管理</el-menu-item>
              <el-menu-item  @click="visible = true">注册</el-menu-item>
              <el-menu-item  @click="dialogVisible = true">登录</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </div>
      </div>
    </div>
    <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="30%"
    :before-close="handleClose"
  >
    <span>登录页面</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="visible" :show-close="false">
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">这是注册页面!</h4>
        <el-input v-model="input" placeholder="Please input" />
        <el-button type="danger" @click="close">
          <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
          Close
        </el-button>
      </div>
    </template>
    This is dialog content.
  </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ElButton, ElDialog } from 'element-plus'
import { CircleCloseFilled } from '@element-plus/icons-vue'
const visible = ref(false)
import { ElMessageBox } from 'element-plus'
import { useDark, useToggle } from '@vueuse/core'
import { Sunny, Moon } from '@element-plus/icons-vue'
import { ref, onMounted, watch } from 'vue'
const dialogVisible = ref(false)
const input = ref('')
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}

let imgUrl = ref('https://i.328888.xyz/2023/04/21/id7w9x.png')
let username = ref('登录')

// 暗黑主题
const theme = ref<boolean>(false)
const isDark = useDark({
  // 存储到localStorage/sessionStorage中的Key 根据自己的需求更改
  storageKey: 'useDarkKEY',
  // 暗黑class名字
  valueDark: 'dark',
  // 高亮class名字
  valueLight: 'light'
})
const toggle = useToggle(isDark)


onMounted(() => {
  const htmlClass = document.getElementsByTagName('html')[0].className
  const isIcon = document.getElementsByClassName('is-icon')[0] as HTMLElement
  htmlClass === 'dark' ? (theme.value = true) : (theme.value = false)
  htmlClass === 'dark' ? (isIcon.style.color = '#fff') : (isIcon.style.color = '#000')
})
watch(theme, () => {
  const isIcon = document.getElementsByClassName('is-icon')[0] as HTMLElement
  theme.value === true ? (isIcon.style.color = '#fff') : (isIcon.style.color = '#000')
})
</script>

<style scoped lang="scss">
.navbar {
  top: 0;
  left: 0;
  position: relative;
  z-index: 999;
  .navbar-wrapper {
    position: relative;
    border-bottom: 1px solid var(--el-border-color);
    height: var(--el-header-height);
    padding: 0 12px 0 24px;
    background-image: radial-gradient(transparent 1px, var(--el-bg-color) 1px);
    background-size: 4px 4px;
    backdrop-filter: saturate(50%) blur(4px);
    -webkit-backdrop-filter: saturate(50%) blur(4px);
    top: 0;
    .header-container {
      display: flex;
      justify-content: space-between;
      margin: 0 auto;
      .logo-container {
        display: flex;
        align-items: center;
        height: var(--el-header-height);
      }
      .content {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-grow: 1;
        .el-menu-demo {
          height: 59px;
        }
        .el-switch {
          margin: auto;
          padding: 0 3px;
          .el-switch__core .el-switch__inner .el-icon,
          .is-text {
            color: var(--el-button-text-color);
          }
        }
      }
    }
  }
}
@media screen and (min-width: 1440px) {
  .navbar-wrapper .header-container {
    max-width: calc(1600px);
  }
}
@media screen and (min-width: 1280px) {
  .navbar-wrapper {
    padding: 0 32px;
  }
}
@media screen and (min-width: 960px) {
  .navbar {
    position: fixed;
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .navbar-wrapper {
    padding: 0 12px 0 32px;
    .content {
      padding-top: 1px;
    }
  }
}
.el-image{
  height: auto;
  width: 40px;
  margin-top: 10px;
}
.el-text{
 margin-top: 5px;
 font-size: 16px;
 margin-left: 20px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>